/* * @Author: gpj * @Date: 2023-06-10 10:31:22 * @LastEditors: Yejing * @LastEditTime: 2023-06-24 16:40:14 *
@Description: desc */
<template>
	<view class="modify-page">
		<!-- 头部 -->
		<c-layout>
			<c-navigation-bar :title="search.title" :navType="search.navType" :navPlaceholder="search.navPlaceholder"
				:navThmen="search.navThmen"></c-navigation-bar>

			<!-- 修改 -->
			<view class="container-box form-modify">
				<u-form :model="personalStep1" ref="uForm">
					<u-form-item :label="$t('user.givenName')" labelPosition="top" prop="firstName">
						<u-input v-model="personalStep1.firstName" placeholder="" />
					</u-form-item>
					<u-form-item :label="$t('user.surname')" labelPosition="top" prop="name">
						<u-input v-model="personalStep1.name" placeholder="" />
					</u-form-item>

					<u-form-item :label="$t('storeManagement.Telephone')" labelPosition="top" prop="phone">
						<!-- <view class="" @click="showAreaCode = true" style="width: 200rpx">+{{ personalStep1.phoneCountryCode||"选择编号" }}</view> -->
						<areaCode @getAreaId='asss' ref="areaCode" :phoneAreaNumber="personalStep1.phoneCountryCode"></areaCode>
						<u-input v-model="personalStep1.phone" type="number" placeholder="" :maxlength="11" />
					</u-form-item>
					<!-- 验证码 -->
					<u-form-item :label="$t('storeManagement.TelephoneCode')" labelPosition="top" prop="phoneCode">
						<u-input v-model="personalStep1.phoneCode" type="number" placeholder="" :maxlength="6" />

						<u-verification-code :seconds="seconds2" ref="uCode2" changeText="xs"
							:start-text="$t('login.loginOther.send')" :end-text="$t('login.loginOther.regain')"
							@change="codeChange2"></u-verification-code>
						<u-button @tap="getCode2" style="color: #2934d0">{{ tips2 }}</u-button>
					</u-form-item>


				</u-form>
				<!-- 	<view class="Uploadproduct p-b-6">
					<text class="p-b-6">{{ $t('storeManagement.CertificateUpload') }}</text>
					<view class="uploaddiv" @click="uploadImg">
						<u-icon style="margin: auto" name="plus" size="40" v-if="personalStep1.shopCoverUrl.length == 0"></u-icon>
						<u-image v-else width="296rpx" height="296rpx" v-for="(item, key) in personalStep1.shopCoverUrl" :src="item" :key="key"></u-image>
					</view>
				</view> -->
				<view class="" style="margin: 30rpx 0">{{ $t('user.documentType') }}</view>
				<uni-data-checkbox selectedColor="#2934D0" v-model="personalStep1.documentType"
					:localdata="certificate"></uni-data-checkbox>
				<!-- 身份证 -->
				<view class="upload" v-if="personalStep1.documentType === '2'">
					<view class="file">
						<view class="info" @click="upload(1)">
							<u-image v-if="personalStep1.cardFrontUrl" width="100%" height="100%"
								:src="$u.file.getMedieUrl(personalStep1.cardFrontUrl)"></u-image>
							<u-image v-else width="48rpx" height="48rpx" src="@/static/images/upBlock.png"></u-image>
						</view>
						<view class="hint">{{ $t('user.UploadFront') }}</view>
					</view>
					<view class="file mb">
						<view class="info" @click="upload(2)">
							<u-image v-if="personalStep1.cardTheBackUrl" width="100%" height="100%"
								:src="$u.file.getMedieUrl(personalStep1.cardTheBackUrl)"></u-image>
							<u-image v-else width="48rpx" height="48rpx" src="@/static/images/upBlock.png"></u-image>
						</view>
						<view class="hint">{{ $t('user.UploadBack') }}</view>
					</view>
				</view>
				<!-- 护照 -->
				<view class="upload" v-else>
					<view class="file mb">
						<view class="info" @click="upload(3)">
							<u-image v-if="personalStep1.photoUrl" width="100%" height="100%"
								:src="$u.file.getMedieUrl(personalStep1.photoUrl)"></u-image>
							<u-image v-else width="48rpx" height="48rpx" src="@/static/images/upBlock.png"></u-image>
						</view>
						<view class="hint">{{ $t('user.passportFront') }}</view>
					</view>
				</view>
			</view>

			<view class="bootom">
				<u-button @click="modifyClick" type="primary">
					{{ $t('storeManagement.NextStep') }}
				</u-button>
			</view>
			<!-- <u-select @confirm="confirmArea" v-model="showAreaCode" :list="countries" value-name="tel" label-name="country"></u-select> -->
			<!-- <u-select @confirm="confirmArea2" v-model="showAreaCode2" :list="countries" value-name="tel" label-name="country"></u-select> -->
		</c-layout>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				countries: [],
				showAreaCode: false,
				showAreaCode2: false,
				seconds: 10,
				seconds2: 10,
				certificate: [{
						text: this.$t('user.identityCard'),
						value: '2'
					},
					{
						text: this.$t('user.passport'),
						value: '1'
					}
				],
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
					title: this.$t('storeManagement.Personalinformation')
				},

				// 验证码
				tips: '',
				tips2: '',
				cardFrontUrl: '',
				cardTheBackUrl: '',
				photoUrl: '',
				// 数据
				personalStep1: {
					firstName: '',
					name: '',
					phone: '',
					phoneCode: '',
					cardFrontUrl: '',
					cardTheBackUrl: '',
					documentType: '2',
					photoUrl: '',
					phoneCountryCode: 1,
				},
				rules: {
					firstName: [{
						required: true,
						message: this.$t('modify.whatsappInfo'),
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: this.$t('modify.whatsappInfo'),
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						max: 11,
						// pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
						message: this.$t('modify.phoneInfo'),
						trigger: 'blur'
					}],




				}
			};
		},
		onLoad() {
			this.getAreaCode()
		},
		methods: {
			asss(e) {
				console.log(e);
				this.personalStep1.phoneCountryCode = Number(e);
			},
			asss2(e) {
				console.log(e);
				this.personalStep1.whatsappCountryCode = e;
			},
			confirmArea(e) {
				console.log(e);
				this.personalStep1.phoneCountryCode = e[0].value;
			},
			confirmArea2(e) {
				console.log(e);
				this.personalStep1.whatsappCountryCode = e[0].value;
			},
			//获取国际区号
			getAreaCode() {
				this.$u.get('/app/user/getInternationalTelephoneAreaCode').then((res) => {
					console.log('quhao', res);
					this.countries = res.data;
				});
			},

			//手机验证码
			getCode2() {
				if (this.personalStep1.phone) {
					if (typeof this.personalStep1.phoneCountryCode === 'number') {
						if (this.$refs.uCode2.canGetCode) {
							uni.showLoading({
								title: this.$t('storeManagement.verification')
							});
							this.$u.post(`/app/shop/sendMessage/${this.personalStep1.phone}`).then((res) => {
								console.log(res.data);
								// this.registerData.cmsCode=res.data
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								this.$u.toast(this.$t('storeManagement.verificationSent'));
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode2.start();
							});
						} else {
							this.$u.toast(this.$t('storeManagement.countdownOver'));
						}
					} else {
						this.$u.toast(this.$t('storeManagement.selectNumber'));
					}
				} else {
					this.$u.toast(this.$t('storeManagement.fillMobile'));

				}

			},

			// 验证码
			codeChange(text) {
				this.tips = text;
			},
			// 验证码
			codeChange2(text) {
				this.tips2 = text;
			},
			modifyClick() {
				// 判断是否填写完成
				let isAccomplishps1 = 1
				for (let key in this.personalStep1) {
					if (key !== 'documentType' && key !== 'cardFrontUrl' && key !== 'cardTheBackUrl' && key !== 'photoUrl') {
						if (!this.personalStep1[key]) {
							console.log
							isAccomplishps1 = 0
						}
					}

				}
				if (this.personalStep1.documentType == '2' && (!this.personalStep1.cardFrontUrl || !this.personalStep1
						.cardTheBackUrl)) {
					this.$u.toast(this.$t('user.uploadCard'));
					return;
				} else if (this.personalStep1.documentType == '1' && !this.personalStep1.photoUrl) {
					this.$u.toast(this.$t('user.uploadCard'));
					return;
				}
				this.$refs.uForm.validate((valid) => {
					if (valid) {
						console.log('验证通过');

						if (typeof this.personalStep1.phoneCountryCode != 'number') {
							this.$u.toast(this.$t('storeManagement.fillPhoneArea'));
							return
						}


						console.log(111);
						uni.setStorageSync('personalStep1', JSON.stringify(this.personalStep1));
						uni.setStorageSync('isAccomplishps1', isAccomplishps1);
						uni.navigateTo({
							url: '/pages/storyType/personalStep2'
						});

					} else {
						console.log('验证失败');
					}
				});
			},

			uploadImg() {
				this.$u.file.fileUpload('shop_img', 9, true).then((res) => {
					this.personalStep1.shopCoverUrl = [];
					console.log(res);
					res.forEach((i) => {
						this.personalStep1.shopCoverUrl.push(this.$u.file.getMedieUrl(i.fileName));
					});
					console.log(this.personalStep1.shopCoverUrl);
				});
			},
			//上传文件
			upload(type) {

				this.$u.file
					.fileUpload('user_img')
					.then((res) => {
						console.log(res);
						// 身份证正面
						if (type == 1) {
							this.personalStep1.cardFrontUrl = res.fileName;
							this.cardFrontUrl = this.$u.file.getMedieUrl(res.fileName);
						}
						// 身份证反面
						if (type == 2) {
							this.personalStep1.cardTheBackUrl = res.fileName;
							this.cardTheBackUrl = this.$u.file.getMedieUrl(res.fileName);
						}
						// 护照
						if (type == 3) {
							this.personalStep1.photoUrl = res.fileName;
							this.photoUrl = this.$u.file.getMedieUrl(res.fileName);
						}
					})
					.catch((err) => {});
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.personalStep1 = JSON.parse(uni.getStorageSync('personalStep1')) ? JSON.parse(uni.getStorageSync(
				'personalStep1')) : this.personalStep1;
			this.$refs.uForm.setRules(this.rules);
			this.$u.get('/app/anchor/getApply').then((res) => {
				if (res.data&&res.data.status=='已完成') {
					let array =res.data.phone.split('-');
					this.personalStep1.phoneCountryCode = Number(array[0]);
					this.personalStep1.phone = array[1]
					this.personalStep1.documentType = String(res.data.documentType)
					this.personalStep1.name = res.data.lastName
					this.personalStep1.firstName = res.data.firstName
					this.personalStep1.cardFrontUrl = this.$u.file.getMedieUrl(res.data.carAfter);
					this.personalStep1.cardTheBackUrl = this.$u.file.getMedieUrl(res.data.carBefore);
					this.personalStep1.photoUrl = this.$u.file.getMedieUrl(res.data.passportPage);

				} else {
					if (JSON.parse(uni.getStorageSync('personalStep1')).phoneCountryCode ==1) {
						let array = this.vuex_user_info.mobile.split('-');
						this.personalStep1.phoneCountryCode = Number(array[0]);
					}
					if (!JSON.parse(uni.getStorageSync('personalStep1')).phone) {
						let array = this.vuex_user_info.mobile.split('-');
						this.personalStep1.phone = array[1];
					}
				}
			});


		}
	};
</script>

<style lang="scss">
	.modify-page {
		.input-box {
			margin-bottom: 40rpx;
		}

		.container-box {
			height: 80vh;
			overflow: auto;
			padding: 30rpx;
		}

		.bootom {
			position: absolute;
			bottom: 60rpx;
			width: 90%;
			left: 50%;
			transform: translateX(-50%);

			.u-btn {
				padding: 30rpx;
			}
		}

		.p-b-6 {
			padding-bottom: 60rpx;
			width: 100%;
			margin-top: 48rpx;
			display: inline-block;
		}

		.uploaddiv {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			border-radius: 20rpx;
			text-align: center;
			opacity: 1;
			min-height: 396rpx;
			border: 1px solid #e8e6ea;
		}

		.upload {
			display: flex;
			justify-content: center;
			margin: 20px 0;

			.file {
				width: 324rpx;
				margin-right: 20rpx;

				.info {
					width: 324rpx;
					height: 160rpx;
					background: #e1e4e8;
					border-radius: 8rpx 8rpx 0rpx 0rpx;
					opacity: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
				}

				.hint {
					width: 324rpx;
					height: 52rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
					color: #fff;
					text-align: center;
					line-height: 52rpx;
					font-size: 28rpx;
				}
			}
		}

	}
</style>